'use client';

import { useState } from 'react';
import { 
  Users, 
  BookOpen, 
  Award, 
  Calendar, 
  ClipboardList, 
  BarChart3, 
  TrendingUp, 
  TrendingDown,
  UserCheck,
  UserX
} from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { FadeIn } from '@/components/ui/motion';

// 模拟数据
const mockClassInfo = {
  name: '三年级二班',
  teacherName: '王老师',
  studentCount: 45,
  boyCount: 23,
  girlCount: 22,
  attendanceRate: 98.5,
  averageScore: 87.6,
  recentExam: '期中考试',
  topStudents: [
    { id: 1, name: '张三', score: 98 },
    { id: 2, name: '李四', score: 97 },
    { id: 3, name: '王五', score: 95 }
  ],
  subjects: [
    { name: '语文', average: 88.5, highest: 98 },
    { name: '数学', average: 86.2, highest: 100 },
    { name: '英语', average: 85.7, highest: 99 },
    { name: '科学', average: 90.1, highest: 98 }
  ],
  attendanceStats: [
    { date: '2023-10-01', present: 44, absent: 1, leave: 0 },
    { date: '2023-10-02', present: 43, absent: 0, leave: 2 },
    { date: '2023-10-03', present: 45, absent: 0, leave: 0 },
    { date: '2023-10-04', present: 42, absent: 1, leave: 2 },
    { date: '2023-10-05', present: 44, absent: 0, leave: 1 }
  ],
  recentAwards: [
    { id: 1, name: '张三', type: '奖励', reason: '数学竞赛一等奖', date: '2023-09-15' },
    { id: 2, name: '李四', type: '奖励', reason: '英语演讲比赛二等奖', date: '2023-09-20' },
    { id: 3, name: '赵六', type: '惩罚', reason: '课堂扰乱秩序', date: '2023-09-25' }
  ]
};

export default function ClassOverviewPage() {
  const [activeTab, setActiveTab] = useState('summary');

  return (
    <FadeIn>
      <div className="container mx-auto py-6">
        <h1 className="text-2xl font-bold mb-6">班级概况</h1>
        
        {/* 班级基本信息卡片 */}
        <div className="mb-6">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-xl">{mockClassInfo.name}</CardTitle>
              <CardDescription>班主任: {mockClassInfo.teacherName}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="flex items-center space-x-4">
                  <div className="p-2 bg-blue-100 rounded-full">
                    <Users className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">学生总数</p>
                    <p className="text-2xl font-bold">{mockClassInfo.studentCount}人</p>
                    <div className="flex text-xs text-gray-500 mt-1">
                      <span>男生: {mockClassInfo.boyCount}人</span>
                      <span className="mx-2">|</span>
                      <span>女生: {mockClassInfo.girlCount}人</span>
                    </div>
                  </div>
                </div>
                
                <div className="flex items-center space-x-4">
                  <div className="p-2 bg-green-100 rounded-full">
                    <UserCheck className="h-6 w-6 text-green-600" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">出勤率</p>
                    <p className="text-2xl font-bold">{mockClassInfo.attendanceRate}%</p>
                    <p className="text-xs text-gray-500 mt-1">近7天平均</p>
                  </div>
                </div>
                
                <div className="flex items-center space-x-4">
                  <div className="p-2 bg-purple-100 rounded-full">
                    <BookOpen className="h-6 w-6 text-purple-600" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">平均成绩</p>
                    <p className="text-2xl font-bold">{mockClassInfo.averageScore}分</p>
                    <p className="text-xs text-gray-500 mt-1">{mockClassInfo.recentExam}</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
        
        {/* 选项卡 */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
          <TabsList className="grid grid-cols-3 mb-6">
            <TabsTrigger value="summary">总体概览</TabsTrigger>
            <TabsTrigger value="attendance">考勤统计</TabsTrigger>
            <TabsTrigger value="performance">成绩分析</TabsTrigger>
          </TabsList>
          
          {/* 总体概览选项卡 */}
          <TabsContent value="summary">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* 学科成绩卡片 */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <BarChart3 className="h-5 w-5 mr-2" />
                    学科成绩概览
                  </CardTitle>
                  <CardDescription>最近一次考试各科成绩</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {mockClassInfo.subjects.map((subject, index) => (
                      <div key={index}>
                        <div className="flex justify-between mb-1">
                          <span className="text-sm font-medium">{subject.name}</span>
                          <span className="text-sm text-gray-500">平均: {subject.average}分 / 最高: {subject.highest}分</span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-2.5">
                          <div 
                            className="bg-blue-600 h-2.5 rounded-full" 
                            style={{ width: `${(subject.average / 100) * 100}%` }}
                          ></div>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
              
              {/* 优秀学生卡片 */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <Award className="h-5 w-5 mr-2" />
                    优秀学生
                  </CardTitle>
                  <CardDescription>最近一次考试成绩前三名</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {mockClassInfo.topStudents.map((student, index) => (
                      <div key={student.id} className="flex items-center">
                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white ${
                          index === 0 ? 'bg-yellow-500' : index === 1 ? 'bg-gray-400' : 'bg-amber-600'
                        }`}>
                          {index + 1}
                        </div>
                        <div className="ml-4">
                          <p className="font-medium">{student.name}</p>
                          <p className="text-sm text-gray-500">{student.score}分</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
              
              {/* 奖惩记录卡片 */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <ClipboardList className="h-5 w-5 mr-2" />
                    近期奖惩记录
                  </CardTitle>
                  <CardDescription>最近一个月的奖惩情况</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {mockClassInfo.recentAwards.map((award) => (
                      <div key={award.id} className="flex items-start">
                        <div className={`p-2 rounded-full ${
                          award.type === '奖励' ? 'bg-green-100' : 'bg-red-100'
                        }`}>
                          {award.type === '奖励' ? (
                            <Award className={`h-4 w-4 ${
                              award.type === '奖励' ? 'text-green-600' : 'text-red-600'
                            }`} />
                          ) : (
                            <UserX className="h-4 w-4 text-red-600" />
                          )}
                        </div>
                        <div className="ml-4">
                          <div className="flex items-center">
                            <p className="font-medium">{award.name}</p>
                            <span className={`ml-2 text-xs px-2 py-0.5 rounded-full ${
                              award.type === '奖励' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                            }`}>
                              {award.type}
                            </span>
                          </div>
                          <p className="text-sm text-gray-500">{award.reason}</p>
                          <p className="text-xs text-gray-400">{award.date}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
              
              {/* 班级动态卡片 */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <Calendar className="h-5 w-5 mr-2" />
                    班级动态
                  </CardTitle>
                  <CardDescription>近期班级活动与通知</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="border-l-2 border-blue-500 pl-4 py-1">
                      <p className="font-medium">期中考试成绩公布</p>
                      <p className="text-sm text-gray-500">全班平均分87.6分，比上次提高2.3分</p>
                      <p className="text-xs text-gray-400">2023-10-15</p>
                    </div>
                    <div className="border-l-2 border-green-500 pl-4 py-1">
                      <p className="font-medium">班级秋游活动</p>
                      <p className="text-sm text-gray-500">计划于10月20日前往市植物园</p>
                      <p className="text-xs text-gray-400">2023-10-10</p>
                    </div>
                    <div className="border-l-2 border-purple-500 pl-4 py-1">
                      <p className="font-medium">家长会通知</p>
                      <p className="text-sm text-gray-500">定于10月25日下午3点在教室举行</p>
                      <p className="text-xs text-gray-400">2023-10-05</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
          
          {/* 考勤统计选项卡 */}
          <TabsContent value="attendance">
            <div className="grid grid-cols-1 gap-6">
              {/* 考勤统计卡片 */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <UserCheck className="h-5 w-5 mr-2" />
                    考勤统计
                  </CardTitle>
                  <CardDescription>近7天考勤情况</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    {/* 考勤概览 */}
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="bg-green-50 p-4 rounded-lg">
                        <div className="flex justify-between items-center">
                          <div>
                            <p className="text-sm text-gray-500">出勤</p>
                            <p className="text-2xl font-bold text-green-600">98.5%</p>
                          </div>
                          <div className="p-2 bg-green-100 rounded-full">
                            <UserCheck className="h-6 w-6 text-green-600" />
                          </div>
                        </div>
                      </div>
                      
                      <div className="bg-red-50 p-4 rounded-lg">
                        <div className="flex justify-between items-center">
                          <div>
                            <p className="text-sm text-gray-500">缺勤</p>
                            <p className="text-2xl font-bold text-red-600">0.5%</p>
                          </div>
                          <div className="p-2 bg-red-100 rounded-full">
                            <UserX className="h-6 w-6 text-red-600" />
                          </div>
                        </div>
                      </div>
                      
                      <div className="bg-yellow-50 p-4 rounded-lg">
                        <div className="flex justify-between items-center">
                          <div>
                            <p className="text-sm text-gray-500">请假</p>
                            <p className="text-2xl font-bold text-yellow-600">1.0%</p>
                          </div>
                          <div className="p-2 bg-yellow-100 rounded-full">
                            <Calendar className="h-6 w-6 text-yellow-600" />
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    {/* 考勤详情表格 */}
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm text-left">
                        <thead className="text-xs text-gray-700 uppercase bg-gray-50">
                          <tr>
                            <th className="px-6 py-3">日期</th>
                            <th className="px-6 py-3">出勤人数</th>
                            <th className="px-6 py-3">缺勤人数</th>
                            <th className="px-6 py-3">请假人数</th>
                            <th className="px-6 py-3">出勤率</th>
                          </tr>
                        </thead>
                        <tbody>
                          {mockClassInfo.attendanceStats.map((day, index) => (
                            <tr key={index} className="bg-white border-b">
                              <td className="px-6 py-4">{day.date}</td>
                              <td className="px-6 py-4 text-green-600">{day.present}</td>
                              <td className="px-6 py-4 text-red-600">{day.absent}</td>
                              <td className="px-6 py-4 text-yellow-600">{day.leave}</td>
                              <td className="px-6 py-4">
                                {((day.present / mockClassInfo.studentCount) * 100).toFixed(1)}%
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
          
          {/* 成绩分析选项卡 */}
          <TabsContent value="performance">
            <div className="grid grid-cols-1 gap-6">
              {/* 成绩分析卡片 */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <BarChart3 className="h-5 w-5 mr-2" />
                    成绩分析
                  </CardTitle>
                  <CardDescription>期中考试成绩分布</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    {/* 成绩概览 */}
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                      <div className="bg-blue-50 p-4 rounded-lg">
                        <div className="flex justify-between items-center">
                          <div>
                            <p className="text-sm text-gray-500">平均分</p>
                            <p className="text-2xl font-bold text-blue-600">87.6</p>
                          </div>
                          <div className="p-2 bg-blue-100 rounded-full">
                            <BarChart3 className="h-6 w-6 text-blue-600" />
                          </div>
                        </div>
                      </div>
                      
                      <div className="bg-green-50 p-4 rounded-lg">
                        <div className="flex justify-between items-center">
                          <div>
                            <p className="text-sm text-gray-500">最高分</p>
                            <p className="text-2xl font-bold text-green-600">98</p>
                          </div>
                          <div className="p-2 bg-green-100 rounded-full">
                            <TrendingUp className="h-6 w-6 text-green-600" />
                          </div>
                        </div>
                      </div>
                      
                      <div className="bg-red-50 p-4 rounded-lg">
                        <div className="flex justify-between items-center">
                          <div>
                            <p className="text-sm text-gray-500">最低分</p>
                            <p className="text-2xl font-bold text-red-600">65</p>
                          </div>
                          <div className="p-2 bg-red-100 rounded-full">
                            <TrendingDown className="h-6 w-6 text-red-600" />
                          </div>
                        </div>
                      </div>
                      
                      <div className="bg-purple-50 p-4 rounded-lg">
                        <div className="flex justify-between items-center">
                          <div>
                            <p className="text-sm text-gray-500">及格率</p>
                            <p className="text-2xl font-bold text-purple-600">95.6%</p>
                          </div>
                          <div className="p-2 bg-purple-100 rounded-full">
                            <Award className="h-6 w-6 text-purple-600" />
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    {/* 成绩分布 */}
                    <div>
                      <h3 className="text-md font-medium mb-4">成绩分布</h3>
                      <div className="space-y-4">
                        <div>
                          <div className="flex justify-between mb-1">
                            <span className="text-sm font-medium">优秀 (90-100分)</span>
                            <span className="text-sm text-gray-500">15人 (33.3%)</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2.5">
                            <div className="bg-green-600 h-2.5 rounded-full" style={{ width: '33.3%' }}></div>
                          </div>
                        </div>
                        
                        <div>
                          <div className="flex justify-between mb-1">
                            <span className="text-sm font-medium">良好 (80-89分)</span>
                            <span className="text-sm text-gray-500">20人 (44.4%)</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2.5">
                            <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: '44.4%' }}></div>
                          </div>
                        </div>
                        
                        <div>
                          <div className="flex justify-between mb-1">
                            <span className="text-sm font-medium">中等 (70-79分)</span>
                            <span className="text-sm text-gray-500">8人 (17.8%)</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2.5">
                            <div className="bg-yellow-600 h-2.5 rounded-full" style={{ width: '17.8%' }}></div>
                          </div>
                        </div>
                        
                        <div>
                          <div className="flex justify-between mb-1">
                            <span className="text-sm font-medium">及格 (60-69分)</span>
                            <span className="text-sm text-gray-500">2人 (4.4%)</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2.5">
                            <div className="bg-orange-600 h-2.5 rounded-full" style={{ width: '4.4%' }}></div>
                          </div>
                        </div>
                        
                        <div>
                          <div className="flex justify-between mb-1">
                            <span className="text-sm font-medium">不及格 (0-59分)</span>
                            <span className="text-sm text-gray-500">0人 (0%)</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2.5">
                            <div className="bg-red-600 h-2.5 rounded-full" style={{ width: '0%' }}></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    {/* 学科成绩对比 */}
                    <div>
                      <h3 className="text-md font-medium mb-4">学科成绩对比</h3>
                      <div className="overflow-x-auto">
                        <table className="w-full text-sm text-left">
                          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
                            <tr>
                              <th className="px-6 py-3">学科</th>
                              <th className="px-6 py-3">平均分</th>
                              <th className="px-6 py-3">最高分</th>
                              <th className="px-6 py-3">最低分</th>
                              <th className="px-6 py-3">及格率</th>
                            </tr>
                          </thead>
                          <tbody>
                            {mockClassInfo.subjects.map((subject, index) => (
                              <tr key={index} className="bg-white border-b">
                                <td className="px-6 py-4 font-medium">{subject.name}</td>
                                <td className="px-6 py-4">{subject.average}</td>
                                <td className="px-6 py-4 text-green-600">{subject.highest}</td>
                                <td className="px-6 py-4 text-red-600">{Math.floor(subject.average * 0.7)}</td>
                                <td className="px-6 py-4">
                                  {Math.floor(90 + Math.random() * 10)}%
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </FadeIn>
  );
}
